<template>
  <div class="echart-xAxis">
    <FormItem
      :form="form"
      option="echart.xAxis.show"
      :label="$demoi18n('echart.label.xAxisDisplay')"
      type="switch"
    />
    <FormItem
      :form="form"
      option="echart.xAxis.name"
      :label="$demoi18n('echart.label.xAxisName')"
      type="input"
    />
    <FormItem
      v-if="hasAxisType"
      :form="form"
      :helptip="barHelptip"
      option="echart.xAxis.type"
      :label="$demoi18n('echart.label.xAxisType')"
      type="select"
      :options="xAxisTypes"
    />
    <FormItem
      :form="form"
      option="echart.xAxis.position"
      :label="$demoi18n('echart.label.xAxisPosition')"
      type="select"
      :options="xAxisPositions"
    />
    <FormItem
      :form="form"
      option="echart.xAxis.inverse"
      :label="$demoi18n('echart.label.reverseAxis')"
      type="switch"
    />
    <FormItem
      :form="form"
      :helptip="$demoi18n('echart.minValue.tip')"
      option="echart.xAxis.min"
      :label="$demoi18n('echart.label.startValue')"
      type="input"
      show-switch
    />
    <FormItem
      :form="form"
      :helptip="$demoi18n('echart.maxValue.tip')"
      option="echart.xAxis.max"
      :label="$demoi18n('echart.label.endValue')"
      type="input"
      show-switch
    />
  </div>
</template>
<script>
import FormItem from '@/components/common/echart/form-item.vue';
import { xAxisTypes, xAxisPositions } from '@/components/common/echart/form-item-options.js';
import echartUtil from '@/components/common/echart/echart-util.js';
export default {
  components: { FormItem },
  props: {
    form: Object,
  },
  data() {
    return {
      xAxisTypes,
      xAxisPositions,
    };
  },
  computed: {
    hasAxisType() {
      const excludes = ['gantt-chart', 'table-gantt-chart', 'table-gantt-combine', 'k-line'];
      return !excludes.includes(this.form.echart._componentName);
    },
    barHelptip() {
      let tip = '';
      if (this.form.echart._componentName === 'uniaxial-bar') {
        tip = this.$demoi18n('uniaxial-bar.xyType.helptip');
      }
      return tip;
    },
  },
  watch: {
    'form.echart.xAxis.type'(newType, oldType) {
      this.form.echart._tranXYAxis = newType === 'value';
    },
  },
  created() {
    this.initPosition();
    this.initTranXYAxis();
  },
  methods: {
    initPosition() {
      // 坐标系位置需要注册该属性
      echartUtil.register('echart.xAxis.axisLine.onZero', this.form, this);
    },
    initTranXYAxis() {
      // 柱形图横向放置
      echartUtil.register('echart._tranXYAxis', this.form, this);
    },
  },
};
</script>
<style lang="less" scoped></style>
